/* eslint-disable no-unused-vars */
/* eslint-disable radix */
/* eslint-disable react/no-array-index-key */
/* eslint-disable array-callback-return */
import React, { useState, useEffect, forwardRef } from 'react';
import { Lesson } from '@/typings/lesson';
import { Card, Skeleton, Button, Alert, Menu } from "antd";
import { Link } from "react-router-dom";

import { MenuOutlined } from "@ant-design/icons";
import './index.scss';

interface Props {
  children?: any;
  lessons?: any;
  getLessons?: any;
  container?: any;
}

function LessonList(props: Props, lessonListRef: any) {
  const [_, forceUpdate] = useState(0);
  useEffect(() => {
    if (props.lessons.list.length === 0) {
      props.getLessons();
    }
    lessonListRef.current = () => forceUpdate((x) => x + 1);
  }, []);
  let start = 0;
  const rem = parseInt(document.documentElement.style.fontSize);
  if (props.container.current) {
    const scrollTop = props.container.current.scrollTop;
    if (scrollTop - 7 * rem > 0) {
      // 卷去的高度减去 7 * rem 才是真正课程列表向上卷去的高度 一个卡片是8.67 * rem
      start = Math.floor((scrollTop - 7 * rem) / (8.67 * rem));
    }
  }

  return (
    <section>
      <h2>
        <MenuOutlined />
        全部课程
      </h2>
      <Skeleton
        loading={props.lessons.list.length === 0 && props.lessons.loading}
        active
        paragraph={{ rows: 8 }}
      >
        {props.lessons.list.map((lesson: Lesson, index: number) => ((start < 5 && index <= 5) || (index >= start && index < start + 5) ? (
          <Link
            key={lesson.id}
            to={{ pathname: `/detail/${lesson.id}`, state: lesson }}
          >
            <Card
              hoverable
              style={{ width: "100%" }}
              cover={<img alt={lesson.title} src={lesson.poster} />}
            >
              <Card.Meta
                title={lesson.title}
                description={`价格: ¥${lesson.price}元`}
              />
            </Card>
          </Link>
          ) : (
            <div key={index} style={{ height: `${8.6666667 * rem}px` }} />
          )))}

        {/* {props.lessons.list.map((item: Lesson, index: number) => {
          (start < 5 || index <= 5) || (index >= start && index < start + 5)
            ? (
              <Link key={item.id} to={{ pathname: `/detail/${item.id}`, state: item }}>
                <Card hoverable style={{ width: "100%" }} cover={<img alt={item.title} src={item.url} />}>
                  <Card.Meta title={item.title} description={`价格：￥${item.price}元`} />
                </Card>
              </Link>
            ) : (
              <div key={index} style={{ height: `${8.6666667 * rem}px` }} />
            );
        })} */}
        {/* {props.lessons.list.map((item: Lesson, index: number) => (
          <Link key={item.id + index} to={{ pathname: `/detail/${item.id}`, state: item }}>
            <Card hoverable style={{ width: "100%" }} cover={<img alt={item.title} src={item.url} />}>
              <Card.Meta title={item.title} description={`价格：￥${item.price}元`} />
            </Card>
          </Link>
          ))} */}

        {props.lessons.hasMore ? (
          <Button type="primary" block loading={props.lessons.loading} onChange={props.getLessons}>{props.lessons.loading ? "" : "加载更多"}</Button>
        ) : (
          <Alert style={{ textAlign: "center" }} message="到底了" type="warning" />
          )}
      </Skeleton>
    </section>
  );
}

export default forwardRef(LessonList);
